<div class="layuimini-container layui-anim layui-anim-upbit">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="form">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">分组方式</label>
                            <div class="layui-input-inline">
                                <select name="groupType" lay-filter="clsSelects">
                                    <option value=''>不分组</option>
                                    <option value="worknum">按用户名分组</option>
                                    <option value="ip">按IP分组</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline" id="word">
                            <label class="layui-form-label">用户ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="groupValue" placeholder="请输入用户ID" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">选择日期</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="startTime" id="date1" autocomplete="off" class="layui-input">
                            </div>
                            <label style="float: left;padding-top: 4px;padding-right: 4px;">_&nbsp;&nbsp;</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="endTime" id="date2" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                          
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"
                                style="width:90px;height:38px;border:none;outline:none;border-radius:6px;background-color:#007bff;color:white"><i
                                    class="layui-icon"></i> 搜 索</button>

                            <button type="submit" lay-submit="" class="layui-btn layui-btn-warm"
                                lay-filter="data-export-btn"
                                style="width:90px;border-radius:6px;background-color:#26B99A;">
                                <i class="layui-icon"></i> 导 出</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <br>
        <div id="table" lay-filter="currentTableFilter">

        </div>
        <div id="page"></div>
    </div>
</div>





<script>

layui.form.render();

var date1 = new Date(),
        date2 = new Date(date1);
    //-30为30天前，+30可以获得30天后的日期
    date2.setDate(date1.getDate() - 30);
    month = date1.getMonth() + 1
    date = date1.getDate()
    if (month < 10) {
        month = "0" + month;
    }
    if (date < 10) {
        date = "0" + date;
    }
    nowDay = date1.getFullYear() + "-" + month + "-" + date
    month = date2.getMonth() + 1
    date = date2.getDate()
    if (month < 10) {
        month = "0" + month;
    }
    if (date < 10) {
        date = "0" + date;
    }
    agoDay = date2.getFullYear() + "-" + month + "-" + date
    //form表单
    // layui.form.render();

    //开始日期
    var today = new Date();
    var start = layui.laydate.render({
        elem: '#date1',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        // value: agoDay,
        value: "",
        done: function (value, date, endDate) {
            // if (value != "") {
            //     end.config.min = {
            //         year: date.year,
            //         month: date.month - 1,
            //         date: date.date
            //     }
            // } else {//清空以后最小值
            //     end.config.min = {
            //         year: 1970,
            //         month: 1,
            //         date: 1
            //     }
            // }
        }
    });

    //结束日期
    var end = layui.laydate.render({
        elem: '#date2',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        // value: nowDay,
        value: "",
        done: function (value, date) {
            // if (value != "") {
            //     start.config.max = {
            //         year: date.year,
            //         month: date.month - 1,
            //         date: date.date
            //     }
            // } else {//清空以后最大值
            //     start.config.max = {
            //         year: today.getFullYear(),
            //         month: today.getMonth(),
            //         date: today.getDate()
            //     }
            // }
        }
    });

    
    
    var tableBar = [
        { title: '序 号', type: 'numbers',width: '10%', align: "center" },
        { field: 'userid', title: '用  户 ID', width: '20%', align: "center" },
        { field: 'userName', title: '姓 名', width: '20%', align: "center" },
        { field: 'ipaddress', title: 'IP 地 址',width: '20%',   align: "center" },
        { field: 'time', title: '登 录 时 间', width: '30%', align: "center" }
    ]

    var tableBar2 = [
        { title: '序 号', type: 'numbers',  width: '20%', align: "center" },
        { field: 'userid', title: '用 户 ID',  width: '20%', align: "center" },
        { field: 'userName', title: '姓 名', width: '20%', align: "center" },
        { field: 'count', title: '合 计',  width: '40%', align: "center" }
    ]

    var tableBar3 = [
        { title: '序 号', type: 'numbers',  width: '20%', align: "center" },
        { field: 'ipaddress', title: 'IP',  width:'40%', align: "center" },
        { field: 'count', title: '合 计',  width: '40%', align: "center" }
    ]

    var initTableParams = {
        "groupType": "",
        "groupValue": "",
        "startTime":$("#date1").val(),
        "endTime":$("#date2").val(),
        "orderType": "创建时间",
        "orderValue": "desc",
        "page": 1,
        "pageSize": 10
    }


    //封装 表格渲染方法
    function tableRender(tableBar, initTableParams) {
        layuiEx.tableRender(
            "/adminLog/LoginLogList",
            'table',
            'page',
            tableBar,
            initTableParams
        );
    }

    tableRender(tableBar, initTableParams)

    //检索事件
    layui.form.on('submit(data-search-btn)', function (params) {
        //分组方式1:按照用户名分组
        if (params.field.groupType == "worknum") {
            layuiEx.tableRender(
                "/adminLog/LoginLogList",
                'table',
                'page',
                tableBar2,
                {
                    "groupType": params.field.groupType,
                    "groupValue": params.field.groupValue,
                    "startTime":$("#date1").val(),
                    "endTime":$("#date2").val(),
                    "orderType": "count(*)",
                    "orderValue": "desc",
                    "page": 1,
                    "pageSize": 10
                }
            );
            return false
        }
        //分组方式2:按照IP分组
        else if (params.field.groupType == "ip") {
            layuiEx.tableRender(
                "/adminLog/LoginLogList",
                'table',
                'page',
                tableBar3,
                {
                    "groupType": params.field.groupType,
                    "groupValue": params.field.groupValue,
                    "startTime":$("#date1").val(),
                    "endTime":$("#date2").val(),
                    "orderType": "count(*)",
                    "orderValue": "desc",
                    "page": 1,
                    "pageSize": 10
                }
            );
            return false
        } else {
            //分组方式3:不分组
            layuiEx.tableRender(
                "/adminLog/LoginLogList",
                'table',
                'page',
                tableBar,
                {
                    "groupType": params.field.groupType,
                    "groupValue": params.field.groupValue,
                    "startTime":$("#date1").val(),
                    "endTime":$("#date2").val(),
                    "orderType": "创建时间",
                    "orderValue": "desc",
                    "page": 1,
                    "pageSize": 10
                }
            );
            return false
        }


    })

    //监听导出按钮
    layui.form.on('submit(data-export-btn)', function (data) {
        var groupType = data.field.groupType
        var groupValue = data.field.groupValue
        var startTime = $("#date1").val()
        var endTime = $("#date2").val()
        var orderType = "count(*)"
        var orderValue = "desc"
        var url = config.server + "/adminLog/exportLoginLog?startTime=" + startTime + "&endTime=" + endTime + "&orderType=" + orderType + "&orderValue=" + orderValue + "&groupType=" + groupType + "&groupValue=" + groupValue
        window.location.href = url;
        return false;
    });






</script>